import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'

export function useScroll(element: Ref<Element>) {
  const x = ref(0)
  const y = ref(0)
  const handleScroll = () => {
    x.value = window.scrollX
    y.value = window.scrollY
  }
  onMounted(() => window.addEventListener('scroll', handleScroll))
  onBeforeUnmount(() => window.removeEventListener('scroll', handleScroll))
  const scrollToView = (arg?: boolean | ScrollIntoViewOptions) => {
    const el = element.value
    console.log(el)
    el.scrollIntoView(arg)
  }
  const scrollToTop = () => {
    const el = element.value
    el.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
  }
  return { x, y, scrollToView, scrollToTop }
}

export function useScrollToTop() {
  const Vueapp = ref<HTMLElement>()
  onMounted(() => {
    Vueapp.value = document.getElementById('app') as HTMLElement
  })
  const scrollToTop = () => {
    const el = Vueapp.value as HTMLElement
    el.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
  }

  return { scrollToTop }
}
